<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.container {
			width: 375px;
			height: 750px;
			margin: 50px auto;
			border: 2px solid #959595;
			border-radius: 12px;
			overflow: hidden;
		}
		
		.tip {
			width: 100%;
			height: 45px;
			line-height: 45px;
			padding: 0 20px;
			background-color: #ffd07e;
			color: #fff;
			display: flex;
			position: relative;
			z-index: 0;
		}
		.img{
			position: absolute;
			top:10px;
			left: 0;
			padding-left: 4px;
			height: 25px;
			background-color: #ffd07e;
			z-index: 1;
		}
		.text {
			--move:375px;
			white-space: nowrap;
			transform: translateX(20px);
			/*background-color: palegoldenrod;*/
			animation: move 5s linear infinite normal;
			animation-timing-function:ease-in;
		}
		
		@keyframes move {
			0% {
				transform: translateX(40px);
			}
			100% {
				transform: translateX(-100%);
			}
		}
	</style>
</head>
<body>
<div class="container">
	<div class="tip">
		<img class="img" src="./img/warning.png" alt="" />
		<div class="text" data-move="375">新开的一个项目里</div>
<!--			<div class="text">最新通知！明日气温23℃</div>-->
	</div>
</div>
<script>
	const textDom=document.querySelector('.text')
	const {width}=textDom.getBoundingClientRect()
	let state=width<375?'pause':'running'
	textDom.style.animationPlayState=state
	const moveWidth=width>=375?width:275
	console.log('textDom',textDom.dataset)
	console.log('文本',width)
	console.log('移动',moveWidth)
	
	/*
	*
	*
	* */
</script>
</body>
</html>